<template>
  <view>
    <pageheader :setting="settingdata"></pageheader>
    <view class="app_welcome">
      <text class="app_halo">{{welcomeData.title}}</text>
      <text class="app_content">{{welcomeData.content}}</text>
    </view>
    <view class="phonecontent">
      <text class="phone_q">+86</text>
      <u-input v-model="phone" placeholder="请输入手机号" maxlength="11" type="number" :border="false" class="phone_puts" />
    </view>
    <view class="app_door">
      <u-button shape="circle" type="success" :custom-style="wechatStyle" :hair-line="false" @click="toyanzheng">获取验证码</u-button>
      <view class="phone_login" @click="toback">微信一键登录</view>
      <view class="app_reading">
        登录即表示您已阅读并同意 <text @click="readingo(1)">《用户协议》</text>和<text @click="readingo(2)">《隐私协议》</text>
      </view>
    </view>
  </view>
</template>

<script>
  var _this;
  export default {
    data() {
      return {
        settingdata: {
          name: ' ',
          bgColor: '#fff',
          titleColor: '#000000',
          showNav: true,
          showTypes: 0,
          position: "phonelogin"
        },
        welcomeData: {
          title: '您好',
          content: '欢迎使用古树之道'
        },
        wechatStyle: {
          width: '590rpx',
          color: '#fff',
          background: '#38be8c'
        },
        phone: ''
      }
    },
    onLoad(e) {
      _this = this
    },
    onShow() {},
    methods: {
      toback: function() {
        uni.navigateBack({
          delta: 1
        })
      },
      toyanzheng: function() {
			let data = [{
				value: _this.phone,
				type: 1,
				title: "请填写手机号"
			}, {
				value: _this.phone,
				type: 3,
				title: "请输入正确手机号"
			}

		]
		if (_this.$plug.verify(data)) {
			uni.navigateTo({
			  url: '/home/login/verify?phone='+this.phone+'&type=1'
			})
		}
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app_welcome {
    margin-top: 214rpx;
    padding: 0 64rpx;
    display: flex;
    flex-direction: column;

    .app_halo {
      font-size: 50rpx;
      color: #333333;
      font-weight: bold;
    }

    .app_content {
      font-size: 50rpx;
      color: #333333;
      margin-top: 20rpx;
    }
  }

  .phonecontent {
    margin: 120rpx 64rpx 0 64rpx;
    padding: 20rpx 0;
    border-bottom: 2rpx solid #EEEEF1;
    display: flex;
    flex-direction: row;
    align-items: center;

    .phone_q {
      font-size: 28rpx;
      color: #000;
      margin-right: 30rpx;
    }

    .phone_puts {
      margin-left: 60rpx;
      flex: 1;
      font-size: 28rpx;
      color: #000;
    }
  }

  .app_door {
    width: 100%;
    padding: 0 0 95rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50rpx;

    .phone_login {
      margin-top: 53rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #666666;
    }

    .app_reading {
      margin-top: 188rpx;
      font-size: 24rpx;
      color: #d5d5d5;
      position: absolute;
      bottom: 95rpx;

      text {
        color: rgb(56, 190, 140);
      }
    }
  }
</style>
